@import '../../style/template';
@import "../../style/vars";

.sheet{
    display: flex;
    flex-direction: column;
    margin-bottom: 4%;


    &__img{
        border-radius: 30px;
        width: 85%;
    }

    &__title{
        padding: 2% 0 2% 0;
        margin-left: 3%;
        @extend %font-title;

        @media #{$tablet}{
            font-size: 17px;
        }
        @media #{$mobile} {
            font-size: 14px;
        }
    }

    &__price{
        margin-bottom: 2%;
        margin-left: 3%;
    }

    &__btn{
        cursor: pointer;
        text-align: center;
        width: 40%;
        padding: 2% 4%;
        margin: 9px 0 9px 0;
        border-radius: 20px;
        border: 1px solid rgb(72, 72, 240);

        @media #{$tablet}{
            font-size: 13px;
        }
        @media #{$mobile} {
            font-size: 10px;
        }
    }

    &__btn:active{
        border: 3px solid blueviolet;
        margin: 5px 0px 5px 0px;
    }
}